$(function () {
  const layer = layui.layer
  const form = layui.form

  /*  图片裁剪功能  */
  // 初始化图片裁剪器
  const $image = $('#image')
  // 裁剪选项
  const options = {
    // 纵横比 （宽高比）
    aspectRatio: 400 / 200,
    // 预览区域
    preview: '.img-preview'
  }
  // 初始化裁剪区域
  $image.cropper(options)

  /*  初始化富文本编辑器   */
  initEditor()

  /*  获取文章列表并渲染到select标签内   */
  initCate()
  function initCate() {
    $.ajax({
      method: 'GET',
      url: '/my/article/cates',
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('获取文章分类失败！')
        }
        // 渲染模板引擎
        let htmlStr = template('tpl-cate', res)
        $('#cateId').html(htmlStr)
        // form是不能动态渲染表单的，所以动态插入的结构+数据，需要通过render() 重新渲染
        //更新全部
        form.render();
      }
    })
  }

  // 点击“选择封面”按钮 ，唤起文件上传框的点击事件
  $('#chooseImage').on('click', function () {
    $('#coverFile').click()
  })

  // 监听 coverFile 的 change 事件，获取用户选择的文件列表
  $('#coverFile').on('change', function (e) {
    // 获取到文件的e.target.files
    let files = e.target.files
    // 判断用户是否选择了文件
    if (files.length === 0) {
      return
    }
    // 根据选择的图片文件，创建对应的 URL 地址
    let imgURL = URL.createObjectURL(files[0])
    // 为裁剪区域重新设置图片
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', imgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })
  //定义文章的发布状态，在点击"草稿"按钮之后，绑定点击事件，修改文章状态
  //默认文章状态为 已发布
  let art_state = '已发布'
  // 点击存为操作，切换状态为草稿
  $('#btnSave').on('click', function () {
    art_state = '草稿'
  })

  // 为表单绑定 submit 提交事件
  $('#formPub').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData($(this)[0])
    // 把当前的状态,添加到 FormData 对象当中去
    fd.append('state', art_state)
    // 将封面裁剪过后的图片，输出为一个文件对象
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        //通过 toBlob 方法转为了文件对象，把文件对象存储到 fd
        fd.append('cover_img', blob)
        //发布文章的请求需要卸载 toblob的回调当中，因为在这里才可以取到blob
        publishArticle(fd)
      })
    console.log(fd.get('cover_img')) //null
  })
  //定义发布文章的ajax请求方法
  function publishArticle(f) {
    $.ajax({
      method: 'POST',
      url: '/my/article/add',
      data: f,
      // 如果,向接口发送的数据是 FormData 格式的;注意: 必须添加以下两个属性
      contentType: false,
      processData: false,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('发布文章失败！')
        }
        layer.msg('发布文章成功！')
        // 发布文章成功后，跳转到文章列表页面
        location.href = '/Big-event/article/art_list.html'
        // 通过添加类名修改当前 dd 的样式
        $('.layui-nav-child dd:nth-child(2)',window.parent.document).addClass('layui-this').siblings().removeClass('layui-this')
      }
    })
  }
})